
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>文档内容生成可视化网页 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>文档内容生成可视化网页 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">什么是“Bento Grid”布局风格？它的设计灵感来源于什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Bento Grid是一种模块化、网格化的内容组织方式，通常由大小不一的矩形或方形块组成，排列紧凑且视觉平衡。其灵感来源于日本的便当（bento）盒子。这种风格常被用于展示功能或服务，如Apple或Notion的官网。</div>
          </div>
          <div class="card-source">来源: 提示词2</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在“提示词1”中，为创建一个优秀的中文可视化网页，提出了哪四个核心“设计目标”？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">四个核心设计目标是：1. 视觉吸引力：创造令人印象深刻的视觉效果以吸引用户；2. 可读性：确保内容在所有设备上都清晰易读；3. 信息传达：以美观高效的方式呈现信息，突出重点；4. 情感共鸣：通过设计激发与内容主题相关的情感。</div>
          </div>
          <div class="card-source">来源: 提示词1</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">根据“提示词1”，推荐使用哪个JavaScript库来实现交互式的数据可视化图表（如思想导图、概念关系图）？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档推荐使用 Mermaid.js 来实现交互式图表，它允许用户探索不同概念之间的关联。</div>
          </div>
          <div class="card-source">来源: 提示词1</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">“提示词2”中提到的“视差滚动布局 (Parallax Scrolling Layout)”是如何创造视觉效果的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">视差滚动布局通过让背景和前景以不同的速度滚动，来创造出深度感和动态效果，从而增强页面的视觉冲击力。</div>
          </div>
          <div class="card-source">来源: 提示词2</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">根据“提示词3”对苹果风格Bento Grid卡片的设计要求，卡片应具备哪些视觉特征？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">卡片应具备明显圆角（20px边框半径）、白色或浅灰背景、细微的阴影效果，并且在鼠标悬停时有轻微的上浮动效果。</div>
          </div>
          <div class="card-source">来源: 提示词3(苹果的 Bento Grid 风格)</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">“提示词1”为提升中文网页的排版质感，提出了哪些具体的排版细节建议？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">建议包括：精心选择衬线和无衬线字体组合；利用字号、字重、颜色等创建视觉层次；考虑使用如“首字下沉”或“悬挂标点”等精致的排版细节。</div>
          </div>
          <div class="card-source">来源: 提示词1</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">“提示词4”中，为了在类似苹果发布会风格的页面中突出核心要点，推荐了哪种视觉设计策略？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">推荐的策略是使用超大字体或数字来突出核心要点，并让画面中的超大视觉元素与小元素形成强烈的比例反差，以此来强调重点。</div>
          </div>
          <div class="card-source">来源: 提示词4</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在“提示词1”中，一个“Hero模块”通常包含哪些元素，其主要作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">一个Hero模块通常包含大标题、副标题、一段引人入胜的引言，以及一张高质量的背景图片或插图。它的主要作用是作为一个引人注目的模块，能够立即吸引用户的注意力。</div>
          </div>
          <div class="card-source">来源: 提示词1</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">“提示词2”中描述的“互动故事布局 (Interactive Storytelling Layout)”旨在达到什么目的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">这种布局通过滚动或点击逐步展开内容，并结合动画和交互元素。其主要目的是提升用户的参与感，并引导用户深入探索内容。</div>
          </div>
          <div class="card-source">来源: 提示词2</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
